<template>
  <div>
    <my-header></my-header>
    <!-- 中间部分 -->
    <div class="container clearfix">
      <!-- 面包屑导航 -->
      <div class="crumbs">
        <span><router-link to="/">结婚</router-link> ></span>
        <span><router-link to="/strategyindex"> 结婚攻略</router-link> ></span>
        <span
          ><router-link :to="`/list/${artcontent.category}`">{{
            artcontent.category
          }}</router-link>
          ></span
        >
        <span
          ><router-link :to="`/list/${artcontent.subcat}`">{{
            artcontent.subcat
          }}</router-link>
          ></span
        >
        <span><i>文章详情</i></span>
      </div>
      <!-- 左侧 -->
      <div class="left">
        <!-- 文章标头 -->
        <div class="art_head">
          <h4>{{ artcontent.title }}</h4>
          <div class="spec">
            <span>{{ `更新时间: ${artcontent.sendtime}` }}</span>
            <span
              >作者: <a href="javascript:;">{{ artcontent.author }}</a></span
            >
            <span>{{ `阅读: ${artcontent.sread}` }}</span>
          </div>
        </div>
        <!-- 文章内容 -->
        <div
          class="art_con"
          v-html="artcontent.content"
          style="overflow: hidden"
        ></div>
        <!-- 解释分享 -->
        <div class="explain">
          <span
            >上述内容为转载或编者观点，如有侵权行为，请点击右下方"举报"按钮</span
          >
          <div class="wechat_share" v-show="wechatshare">
            <div>
              <span>分享到微信朋友圈</span
              ><a href="javascript:;" @click="closeShare">×</a>
            </div>
            <div class="erweicode">
              <img
                src="../../public/img/yuanzj/strategy_index/wechat_erweima.jpg"
                alt=""
              />
            </div>
            <p>打开微信，点击底部的"发现"，</p>
            <p>使用"扫一扫"即可将网页分享至朋友圈</p>
          </div>
          <span>
            分享至:
            <a href="javascript:;"
              ><img
                src="https://qnm.hunliji.com/o_1dd2o7km4jcqp4ccav4hq1cg2b.png"
                alt=""
            /></a>
            <a href="javascript:;"
              ><img
                @click="openShare"
                src="https://qnm.hunliji.com/o_1dd2o7km4g4n1atm7m31u4j14roc.png"
                alt=""
            /></a>
            <a href="javascript:;"
              ><img
                src="https://qnm.hunliji.com/o_1dd2o7km4vgd18ej1lql1ivg1ubld.png"
                alt=""
            /></a>
          </span>
        </div>
        <!-- 标签举报 -->
        <div class="label_report">
          <a href="javascript:;" @click="jumpReport">举报</a>
          <div class="label_area">
            <span v-for="(bq, i) of artcontent.label" :key="i" v-show="bq">
              <img
                src="https://qnm.hunliji.com/o_1dd2jt52d1tebdn0kd61tdc1qd3e.png"
                alt=""
              />
              <a href="javascript:;">{{ bq }}</a>
            </span>
          </div>
        </div>
        <!-- 上下链接 -->
        <div class="linkage">
          <span @click="changeArticle($event, lasttitle.yid)"
            ><router-link
              :to="`/scontent/${lasttitle.yid}`"
              v-show="lasttitle.title"
             
              >{{ `上一篇：${lasttitle.title}` }}</router-link
            ></span
          >
          <span
            style="text-align: right"
            @click="changeArticle($event, nexttitle.yid)"
            ><router-link
              :to="`/scontent/${nexttitle.yid}`"
              v-show="nexttitle.title"
             
              >{{ `下一篇：${nexttitle.title}` }}</router-link
            ></span
          >
        </div>
        <!-- 精选文章 -->
        <div class="best_artical">
          <h4>精选文章</h4>
          <div class="art_list">
            <ul
              class="clearfix"
              v-for="(wz, i) of bestlist.slice(0, 6)"
              :key="i"
            >
              <li class="imgs">
                <a href="javascript:;"><img :src="wz.pic" alt="" /></a>
              </li>
              <li class="topic" @click="changeArticle($event, wz.yid)">
                <router-link :to="`/scontent/${wz.yid}`">{{
                  wz.title
                }}</router-link>
              </li>
              <li class="tag">
                <a
                  href="javascript:;"
                  v-for="(bq, i) of wz.label.split(',')"
                  :key="i"
                  v-show="bq"
                  >{{ bq }}</a
                >
              </li>
              <li class="send_date">{{ wz.sendtime.slice(0, 10) }}</li>
            </ul>
          </div>
        </div>
        <!-- 评论举报 -->
        <div class="comment" id="reportpoint">
          <h3 @click="toggleComrep">
            <span :class="{ com: comrep == true }"
              ><a href="javascript:;">评论</a></span
            >
            <i></i>
            <span :class="{ com: comrep == false }"
              ><a href="javascript:;">举报</a></span
            >
          </h3>
          <div class="com_box" v-if="comrep">
            <div class="tie" v-if="!inputbox">
              您还未登录，依《网络安全法》相关要求，请您登录账户后再提交发布信息。<a
                href="javascript:;"
                @click="openLogin"
                >立即登录</a
              >
            </div>
            <textarea v-model="ctxt" class="input-comment" v-else placeholder="输入评论内容"></textarea>
            <div class="button" @click="submitComment">
              提交评论<img
                src="//qnm.hunliji.com/o_1csdquplcseeknt1jf21is6kgj9.png"
              />
            </div>
          </div>
          <div class="com_box" v-else>
            <div class="tie" v-if="!inputbox">
              您还未登录，依《网络安全法》相关要求，请您登录账户后再提交发布信息。<a
                href="javascript:;"
                @click="openLogin"
                >立即登录</a
              >
            </div>
            <textarea v-model="rtxt" class="input-comment" v-else placeholder="输入举报内容"></textarea>
            <div class="button" @click="submitReport">
              提交举报<img
                src="http://qnm.hunliji.com/o_1csdquplcseeknt1jf21is6kgj9.png"
              />
            </div>
          </div>
        </div>
        <!-- 用户评论 -->
        <div class="user_comment">
          <h3>用户评论</h3>
          <ul class="comment_detail clearfix" v-for="(item,i) in comlist" :key="i">
            <li><img :src="item.avatar"/></li>
            <li class="cname">{{item.cname}}</li>
            <li class="ctime">{{item.ctime}}</li>
            <li class="ctxt">{{item.ctxt}}</li>
          </ul>
        </div>
      </div>
      <!-- 右侧 -->
      <div class="right">
        <!-- 引入猜你想找 -->
        <strategy-label></strategy-label>
        <!-- 新娘说 -->
        <div class="forum">
          <div class="forum_head guess_head">
            <h3>新娘说</h3>
            <a href="javascript:;">查看更多 ></a>
          </div>
          <a href="javascript:;">
            <img
              src="http://qnm.hunliji.com/FhXanlKYnKiaV3IK6wqUaPpw40yD?imageView2/2/w/688"
              alt=""
            />
            <p>2020超详细‼️超全💯备婚采购清单❤️新郎新娘分工版</p>
          </a>
          <a href="javascript:;">
            <img
              src="http://qnm.hunliji.com/FlmHcVIUQOVXMnetNfle1V2LFhoJ?imageView2/2/w/688"
              alt=""
            />
            <p>倒计时两个月，这些万能表格帮你快速搞定备婚</p>
          </a>
        </div>
        <!-- 引入结婚美图 -->
        <great-photos></great-photos>
        <!-- 最新/最热列表 -->
        <div class="latest">
          <h3 @click="toggleNewhot">
            <span :class="{ nh: newhot == true }"
              ><a href="javascript:;">最新</a></span
            >
            <i></i>
            <span :class="{ nh: newhot == false }"
              ><a href="javascript:;">最热</a></span
            >
          </h3>
          <!-- 最新列表 -->
          <ul class="latest_list" v-if="newhot">
            <li
              v-for="(xb, i) of newlist.slice(0, 6)"
              :key="i"
              @click="changeArticle($event, xb.yid)"
            >
              <router-link :to="`/scontent/${xb.yid}`">{{
                xb.title
              }}</router-link>
            </li>
          </ul>
          <!-- 最热列表 -->
          <ul class="latest_list" v-else>
            <li
              v-for="(xb, i) of hotlist.slice(0, 6)"
              :key="i"
              @click="changeArticle($event, xb.yid)"
            >
              <router-link :to="`/scontent/${xb.yid}`">{{
                xb.title
              }}</router-link>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 引入登录 -->
    <to-login v-show="loginbox"></to-login>
    <my-footer></my-footer>
  </div>
</template>


<script>
import strategyLabel from "../components/strategy/StrategyLabel";
import GreatPhotos from "../components/strategy/GreatPhotos";
import ToLogin from "../components/strategy/ToLogin";
export default {
  components: { strategyLabel,GreatPhotos,ToLogin},
  props: ["id"],
  data() {
    return {
      artcontent: "",
      wechatshare: false,
      lasttitle: "",
      nexttitle: "",
      bestlist: [],
      comrep: true,
      newhot: true,
      newlist: [],
      hotlist: [],
      loginbox: false,
      ctxt:"",
      rtxt:"",
      comlist:[],
      person:"",
      inputbox:false,
    };
  },
  methods: {
    changeloginbox(){
      this.loginbox=false
    },
    changeinputbox(){
      this.inputbox=true
    },
    // 提交评论
    submitComment() {
      if(window.sessionStorage.getItem('is_login',1)){
        if(!this.ctxt){
          alert("请输入内容");
        }else{
          this.axios.get(`/strategy/suser?phone=${window.sessionStorage.phoneNumber}`).then(res=>{
            this.person=res.data;
            let uid=this.person[0].uid;
            let uname=this.person[0].uname;
            let avatar="https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3576522221,3365069423&fm=26&gp=0.jpg";
            let ctime=new Date();
            this.$nextTick(()=>{
              this.axios.post(`/strategy/scomtxt`,{
                strategy_id:this.id,
                user_id:uid,
                cname:uname,
                avatar:avatar,
                ctime:ctime,
                ctxt:this.ctxt
              }).then(result=>{
                this.ctxt="";
                if(result.status==200){
                  this.loadComments();
                  alert('提交评论成功')
                }else{
                  alert('提交评论失败')
                }
                
              })
            })
          })
        }
      }else{
        alert("请先登录");
      }
    },
    // 提交举报
    submitReport(){
      if(window.sessionStorage.getItem('is_login',1)){
        if(!this.rtxt){
          alert("请输入内容")
        }else{
          alert("提交举报成功");
          this.rtxt="";
        }
      }else{
        alert('请先登录')
      }
    },

    //加载评论
    loadComments(){
      this.axios.get(`/strategy/scomment?yid=${this.id}`).then(res=>{
        this.comlist=res.data;
        this.comlist.forEach(item=>{
          if(item.ctime){
            item.ctime=item.ctime.slice(0,10);
          }
        })
      })
    }, 
    // 加载页面时根据登录状态判断评论举报面板
    loadInputbox(){
      if(window.sessionStorage.getItem('is_login',1)){
        this.inputbox=true;
      }
    },
    

    // 加载正文
    loadContent() {
      this.axios.get(`/strategy/scontent?yid=${this.id}`).then((res) => {
        this.artcontent = res.data[0];
        document.title=`${this.artcontent.title}【婚礼纪】`;
        this.artcontent.sendtime =
          this.artcontent.sendtime.slice(0, 10) +
          " " +
          this.artcontent.sendtime.slice(11, 19);
        this.artcontent.label = this.artcontent.label.split(",");
        if (this.artcontent.sread >= 100000) {
          this.artcontent.sread = `${
            parseInt(this.artcontent.sread / 100000) * 10
          }w+`;
        }
      });
    },

    // 点击打开或关闭微信分享
    openShare() {
      this.wechatshare = true;
    },
    closeShare() {
      this.wechatshare = false;
    },

    // 点击切换文章
    changeArticle(e, order) {
      if (e.target.innerText) {
        this.id = order;
        this.loadContent();
        this.loadLast();
        this.loadNext();
        this.loadRandomlabel();
      }
    },

    // 请求上一篇或下一篇
    loadLast() {
      this.axios
        .get(`/strategy/scontent?yid=${parseInt(this.id) - 1}`)
        .then((res) => {
          this.lasttitle = res.data[0];
        });
    },
    loadNext() {
      this.axios
        .get(`/strategy/scontent?yid=${parseInt(this.id) + 1}`)
        .then((res) => {
          this.nexttitle = res.data[0];
        });
    },

    // 加载精选文章列表
    loadBestlist() {
      let page = 1;
      let pagesize = 6;
      this.axios
        .get(
          `/strategy/bestlist?pagestart=${
            (page - 1) * pagesize
          }&pagesize=${pagesize}`
        )
        .then((res) => {
          res.data.forEach((wz) => {
            if (wz.pic) {
              wz.pic = `${wz.pic}`;
            }
            if (wz.scan >= 100000) {
              wz.scan = `${parseInt(wz.scan / 100000) * 10}w+`;
            }
          });
          this.bestlist = res.data;
        });
    },

    // 点击举报切换到举报面板
    jumpReport() {
      document.getElementById('reportpoint').scrollIntoView({behavior:'smooth',block:'nearest',inline:'nearest'})
      this.comrep = false;
    },

    // 点击切换评论和举报面板
    toggleComrep(e) {
      if (e.target.innerText == "评论") {
        this.comrep = true;
      } else if (e.target.innerText == "举报") {
        this.comrep = false;
      }
    },

    // 加载最新/最热攻略板块
    loadNewlist() {
      // 通过axios  发送ajax请求，访问类别列表
      this.axios.get("/strategy/newlist").then((res) => {
        this.newlist = res.data;
      });
    },
    loadHotlist() {
      this.axios.get("/strategy/hotlist").then((res) => {
        this.hotlist = res.data;
      });
    },

    // 点击切换最新和最热
    toggleNewhot(e) {
      if (e.target.innerText == "最新") {
        this.newhot = true;
      } else if (e.target.innerText == "最热") {
        this.newhot = false;
      }
    },

    // 点击打开登录
    openLogin() {
      this.loginbox = true;
    },

  },
  mounted() {
    // 加载正文
    this.loadContent();

    // 加载上一篇和下一篇标题
    this.loadLast();
    this.loadNext();

    // 加载精选文章列表
    this.loadBestlist();

    // 加载最新/最热攻略板块
    this.loadNewlist();
    this.loadHotlist();

    // 加载页面时根据登录状态判断评论举报面板
    this.loadInputbox();

    //加载评论
    this.loadComments();
  },
};
</script>


<style scoped>
/* 袁自君补充的自己的公共样式 */
body {
  background-color: #fdfdfd;
}
a {
  text-decoration: none;
}
.clearfix::after {
  display: block;
  clear: both;
  content: "";
}
a,
span,
b,
i,
em {
  display: inline-block;
  font-style: normal;
}
/* 最新攻略板块样式 */
.latest_list {
  box-shadow: 0px 4px 28px rgb(0 0 0 / 12%);
  padding: 24px 24px 24px 22px;
}
.latest_list li {
  padding-left: 16px;
  position: relative;
  margin-bottom: 16px;
}
.latest_list li::before {
  position: absolute;
  content: "";
  left: 4px;
  top: 45%;
  transform: translateY(-50%);
  background: #666666;
  width: 4px;
  height: 4px;
  border-radius: 2px;
  z-index: 100;
}
.latest_list li a {
  width: 258px;
  color: #333;
  font-size: 14px;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.latest_list li a:hover {
  color: #f83244;
}
/* 面包屑导航样式 */
.crumbs {
  margin-top: 15px;
  margin-bottom: 20px;
  font-size: 12px;
  color: #999;
}
.crumbs span i {
  color: #333;
  font-style: normal;
}
.crumbs span a {
  color: #999;
}
.crumbs span a:hover {
  color: #f83244;
}

img {
  vertical-align: middle;
}
img:hover {
  opacity: 0.8;
}
.container {
  width: 1200px;
  margin: 0 auto;
}
.left {
  width: 820px;
  float: left;
}

.art_head {
  text-align: center;
  padding-bottom: 30px;
  border-bottom: 1px solid #e8e8e8;
}
.art_head h4 {
  font-size: 32px;
  padding-bottom: 24px;
  color: #000;
}
.art_head span {
  color: #666;
  font-size: 14px;
  margin-right: 20px;
}
.art_head span a {
  color: #13acec;
}
.art_head span a:hover {
  text-decoration: underline;
}

.art_con {
  padding: 30px 0 40px;
}
.art_con img {
  max-width: 640px;
}
.art_con a {
  color: #007bff;
}
.art_con a:hover {
  text-decoration: underline;
}

.explain {
  position: relative;
  border-top: 1px solid #e8e8e8;
  padding: 20px 0;
  font-size: 14px;
  color: #666;
  display: flex;
  justify-content: space-between;
}
.explain a img {
  width: 32px;
  height: 32px;
  margin-left: 12px;
}
.explain .wechat_share {
  position: absolute;
  left: 423px;
  top: -150px;
  padding: 10px;
  width: 280px !important;
  height: 340px !important;
  background: #fff;
  border: solid 1px #d8d8d8;
  z-index: 11001;
  font-size: 12px;
}
.wechat_share div {
  color: #000;
  font-weight: bold;
}
.wechat_share div a {
  float: right;
  width: 16px;
  height: 16px;
  line-height: 16px;
  color: #999;
  text-decoration: none;
  font-size: 16px;
}
.wechat_share img {
  width: 220px;
  padding: 0 30px;
}
.wechat_share img:hover {
  opacity: 1;
}
.wechat_share p {
  padding-bottom: 5px;
}

.label_report {
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
}
.label_area span {
  align-items: center;
  background: #ebf9ff;
  border-radius: 10px;
  height: 20px;
  padding: 0 7px 0 2px;
  margin-right: 12px;
}
.label_area span img {
  height: 16px;
  width: 16px;
  margin: 0 3px 0 0px;
  vertical-align: middle;
}
.label_area span a {
  color: #13acec;
  font-size: 12px;
}
.label_report > a:hover {
  color: #f83244;
}
.linkage {
  display: flex;
  justify-content: space-between;
  margin: 40px 0 80px;
  font-size: 14px;
}
.linkage a {
  width: 340px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.linkage a:hover {
  color: #f83244;
}

.best_artical h4 {
  padding: 0px 0 20px 0;
  font-size: 24px;
  color: #000;
  font-weight: normal;
}
.best_artical .art_list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.best_artical .art_list ul {
  width: 390px;
  margin-bottom: 20px;
}
.best_artical .art_list ul .imgs {
  float: left;
  width: 200px;
  height: 124px;
  margin-right: 20px;
}
.best_artical .art_list ul .imgs img {
  width: 200px;
  height: 124px;
}
.best_artical .art_list ul .topic a {
  color: #000;
  font-size: 14px;
  margin-top: 8px;
  line-height: 20px;
  height: 40px;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.best_artical .art_list ul .topic a:hover {
  color: #f83244;
}
.best_artical .art_list ul .tag {
  width: 100%;
  height: 16px;
  margin-top: 12px;
  font-size: 12px;
}
.best_artical .art_list ul .tag a {
  color: #13acec;
}
.best_artical .art_list ul .tag a:hover {
  text-decoration: underline;
}
.best_artical .art_list ul .send_date {
  margin-top: 30px;
  color: #666;
  font-size: 12px;
}

.comment {
  margin-top: 20px;
  margin-bottom: 30px;
}
.comment h3 {
  font-size: 24px;
  font-weight: normal;
  margin-bottom: 20px;
}
.comment h3 a {
  color: #000;
}
.comment h3 span.com a {
  color: #f83244;
}
.comment h3 a:hover {
  color: #f83244;
}
.comment h3 i {
  display: inline-block;
  height: 22px;
  width: 1px;
  background: #aaa;
  margin: 0 20px;
  margin-bottom: 0;
}

.com_box {
  width: 770px;
  height: 257px;
  box-shadow: 3px 4px 6px 4px rgb(0 0 0 / 5%);
  padding: 0 24px;
  border-radius: 6px;
  position: relative;
}
.com_box .tie {
  padding-top: 15px;
  font-size: 14px;
  color: #aaa;
}
.com_box .tie a {
  color: #13acec;
}
.com_box .tie a:hover {
  text-decoration: underline;
}
.input-comment{
  width: 700px;
  height: 140px;
  float: left;
  margin-top: 15px;
  padding: 5px;
  outline: 0;
  resize: none;
  vertical-align: middle;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
}
.com_box .button {
  width: 160px;
  height: 48px;
  background: #f83244;
  color: #fff;
  text-align: center;
  line-height: 48px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 24px;
  position: absolute;
  bottom: 24px;
  right: 24px;
}
.button:hover {
  opacity: 0.85;
}
.com_box .button img {
  margin-left: 10px;
  vertical-align: middle;
}
.user_comment{
  margin-bottom: 80px;
}
.user_comment h3{
  font-size: 24px;
} 
.comment_detail{
  padding-top: 30px;
}
.user_comment .comment_detail li:first-child{
  float: left;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 24px;
  overflow: hidden;
}
.comment_detail img{
  width: 50px;
  height: 50px;
  object-fit: cover;
}
.comment_detail .cname{
  font-size: 14px;
  color: #666;
  line-height: 24px;
}
.comment_detail .ctime{
  font-size: 12px;
  color: #999;
  line-height: 20px;
  margin-bottom: 6px;
}
.comment_detail .ctxt{
  margin-left: 74px;
  font-size: 14px;
  color: #333;
  line-height: 24px;
  border-bottom: 1px dashed #ccc;
  padding-bottom: 30px;
}
.comment_detail:last-child .ctxt{
  border-bottom: 0;
}

.right {
  width: 320px;
  float: left;
  margin-left: 60px;
}

.forum {
  margin-top: 40px;
}
.forum > a {
  margin-bottom: 20px;
}
.forum a img {
  width: 320px;
  height: 200px;
  margin-bottom: 14px;
}
.forum a img:hover {
  opacity: 1;
}
.forum a p {
  font-size: 14px;
  color: #000;
}
.forum a:hover {
  color: #f83244;
}

.latest {
  margin: 40px 0 120px;
}
.latest h3 {
  font-size: 24px;
  font-weight: normal;
  margin-bottom: 20px;
}
.latest h3 a {
  color: #000;
}
.latest h3 span.nh a {
  color: #f83244;
}
.latest h3 a:hover {
  color: #f83244;
}
.latest h3 i {
  display: inline-block;
  height: 22px;
  width: 1px;
  background: #aaa;
  margin: 0 20px;
  margin-bottom: 0;
}


</style>